<template>
    <div class="emergency-broadcast">
        <div v-show="loading" class="realTime-ala-loading" ref="realTimealaloading"></div>
        <div v-if="!loading" class="broadcast-container">
            <div class="grid-checkbox">
                <el-checkbox v-model="checked1" :indeterminate="indeterminate" label="全选" size="large"
                    @change="selectAll" />
            </div>
            <div class="bottom">
                <div class="grid-container">

                    <div class="grid-box">
                        <div class="broadcast-item" v-for="(item, index) in options" :key="index"
                            :class="item.status == '1' ? '' : 'un'">
                            <div class="broadcast-top">
                                <div class="icon">
                                    <img :src="requireImgUrl('image', '喇叭')" alt="">
                                </div>
                                <div class="title" :title="item.equipmentName">{{ item.equipmentName }}</div>
                                <div class="check-box">
                                    <el-checkbox :model-value="item.checked" size="large" @change="change(item)" />
                                </div>
                            </div>
                            <div class="detail" :title="item.controlName">
                                {{ item.controlName }}
                            </div>
                            <div class="broadcast-bottom" :class="item.status == '1' ? '' : 'unline'">
                                <div class="cirle">
                                </div>
                                <div class="text">{{ item.status == "1" ? '在线' : '离线' }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="progation">
                        <el-pagination background layout="prev, pager, next" :total="total" />
                    </div>
                </div>
                <div class="broadcastinfo-container">
                    <div class="topic">设备控制</div>
                    <div class="input-box">
                        <div class="input-item">
                            <div class="title">播放内容</div>
                            <div class="input-input">
                                <input placeholder="请输入参数值" v-model="content" type="text">
                            </div>
                        </div>
                        <div class="input-item">
                            <div class="title">播放次数</div>
                            <div class="input-input">
                                <input placeholder="请输入参数值" v-model="execTimes" type="text">
                            </div>
                        </div>
                        <div class="input-item">
                            <div class="title">播放间隔</div>
                            <div class="input-input">
                                <input placeholder="请输入参数值" v-model="execInterval" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="btn">
                        <el-button type="primary" :disabled="disabled" @click="actionControlbtn">播放</el-button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { requireImgUrl } from '@/utils/localurl/metaUrl';
import { getbroadcastConfig } from '@/api/screen/equipment';
import { setBroadCast } from '@/api/equipment';
import { ElMessage } from 'element-plus';
import lottie from 'lottie-web';
import jsonData from '../home/components/loading5-color-data.json';

const indeterminate = ref(false);
const checked1 = ref(false);
const loading = ref(true);
const realTimealaloading = ref(null);
const options = ref([]);
const size = ref(10);
const total = ref(1);
const pages = ref(1);
const getBroacast = async () => {
    let config = {
        pageNum: 1,
        pageSize: 10
    };
    let res = await getbroadcastConfig(config) as any;
    if (res.code == 200) {
        console.log(res);

        size.value = res.data.size;
        total.value = res.data.total;
        pages.value = res.data.pages;
        res.data.records.forEach(item => {
            item.checked = false;
        });
        options.value = res.data.records;
        loading.value = false;
    }
};
// 控制设备id
const broadcastConfigIds = ref([]);
// 播放次数
const execTimes = ref();
// 播放间隔
const execInterval = ref();
// 播放内容
const content = ref('')
const change = (parent) => {

    if (!parent.checked) {
        parent.checked = true;
        ElMessage({
            message: '勾选',
            type: 'info'
        });
        broadcastConfigIds.value.push(parent.controlId);

        if (broadcastConfigIds.value.length == options.value.length) {
            checked1.value = true;
        }
        else {
            checked1.value = false;
        }
    }
    else {
        parent.checked = false;
        ElMessage({
            message: '取消勾选',
            type: 'info'
        });
        broadcastConfigIds.value = broadcastConfigIds.value.filter((item, index) => {
            return broadcastConfigIds.value.indexOf(item) === parent.controlId;
        });

        if (broadcastConfigIds.value.length == options.value.length) {
            checked1.value = true;
        }
        else {
            checked1.value = false;
        }
    };
};
const selectAll = (e) => {
    if (e) {
        ElMessage({
            message: '全选',
            type: 'info'
        });
        options.value.forEach(item => {
            item.checked = true;
            broadcastConfigIds.value.push(item.controlId);
        });


    }
    else {
        ElMessage({
            message: '取消全选',
            type: 'info'
        });


        options.value.forEach(item => {
            item.checked = false;
            broadcastConfigIds.value = [];
        });

    };
};
onMounted(() => {
    nextTick(() => {
        getBroacast();
        lottie.loadAnimation({
            container: realTimealaloading.value, // 挂载在某个容器下面
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: jsonData,//动画json
        });
    });
});
const disabled = ref(false);
const actionControlbtn = async () => {

    console.log(broadcastConfigIds.value);


    if (content.value && execTimes.value && broadcastConfigIds.value.length > 0) {
        disabled.value = true;
        let queryForm = {
            content: content.value,
            execTimes: execTimes.value,
            execInterval: execInterval.value,
            broadcastConfigIds: broadcastConfigIds.value
        };

        let res = await setBroadCast(queryForm) as any;
        if (res.code == 200) {
            ElMessage({
                message: '广播成功',
                type: 'success'
            });
            disabled.value = false;
            content.value = '';
            execTimes.value = '';
            execInterval.value = '';
        };
    }
    else {
        ElMessage({
            message: '未填必填项',
            type: 'warning'
        });
    };
};


</script>
<style lang="scss" scoped>
.emergency-broadcast {
    margin-top: 5vh;
    width: 100%;
    height: clamp(46.25rem, 38.54vw, 92.5rem);

    .realTime-ala-loading {
        width: 100%;
        height: 100%;
    }

    .broadcast-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;


        .grid-checkbox {
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;

            :deep(.el-checkbox__label) {
                color: white;
            }

        }

        .bottom {
            width: 100%;
            height: calc(100% - 30px);
            display: flex;
            justify-content: space-between;

            .grid-container {
                width: 80%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                justify-content: space-between;

                .grid-box {
                    width: 100%;
                    height: calc(100% - 80px);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-content: space-between;

                    .broadcast-item {
                        width: 19.5%;
                        height: 24%;
                        border-radius: 5px;
                        background-color: RGBA(10, 47, 64, 1);
                        padding: 10px;
                        box-sizing: border-box;
                        cursor: pointer;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        &.un {
                            background-color: RGBA(37, 55, 64, 1);
                        }

                        .broadcast-top {
                            width: 100%;
                            height: 50px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: white;

                            .title {
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                font-size: clamp(1rem, 0.83vw, 2rem);
                            }
                        }


                        .detail {
                            color: white;
                            width: 100%;
                            height: 20px;
                            display: flex;
                            align-items: center;
                            font-size: clamp(0.875rem, 0.73vw, 1.75rem);
                        }

                        .broadcast-bottom {
                            width: 100%;
                            height: calc(100% - 80px);
                            display: flex;
                            align-items: center;

                            .cirle {
                                width: clamp(0.5rem, 0.42vw, 1rem);
                                height: clamp(0.5rem, 0.42vw, 1rem);
                                border-radius: 50%;
                                background-color: #00FF75;
                            }

                            .text {
                                margin-left: clamp(0.313rem, 0.26vw, 0.625rem);
                                font-size: clamp(0.875rem, 0.73vw, 1.75rem);
                                color: #00FF75;
                            }
                        }
                    }
                }


                .progation {
                    width: 100%;
                    height: 50px;
                    display: flex;
                    align-items: flex-end;
                    justify-content: flex-end;

                }
            }


            .broadcastinfo-container {
                width: 19%;
                height: 100%;
                display: flex;
              
                flex-direction: column;
                background-color: RGBA(6, 30, 42, 1);
                padding: 20px;
                box-sizing: border-box;

                .topic {
                    width: 100%;
                    height: 50px;

                    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                    font-weight: bold;
                    color: #C9EFFF;
                    font-size: clamp(1rem, 0.83vw, 2rem);
                    line-height: 50px;
                }

                .input-box {
                    width: 100%;
                    height: auto;
                 

                    .input-item {
                        width: 100%;
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        margin-bottom: 10px;

                        .title {
                            font-size: clamp(0.875rem, 0.73vw, 1.75rem);
                            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                            font-weight: 400;
                            color: #BFBFBF;
                        }

                        .input-input {
                            margin-top: 5px;
                            width: 100%;
                            height: 32px;
                            border-radius: 5px;
                            opacity: 1;
                            border: 1px solid #26BEFF;

                            input {
                                width: 100%;
                                height: 100%;
                                border: none;
                                outline: none;
                                border-radius: 5px;
                                background-color: RGBA(6, 30, 42, 1);
                                color: white;
                                text-indent: 1em;

                                &:focus {
                                    border-color: #ff962d !important;
                                    outline: 0;
                                    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(255, 150, 43, .6);
                                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(255, 150, 43, .6);

                                }
                            }
                        }
                    }
                }

                .btn {
                    width: 100%;
                    height: 50px;
                  
                    display: flex;
                    align-items: flex-end;
                }

            }
        }



    }




}
</style>